<template>
  <IFexHeaderMain>
    <template #header>
      <IHeader>首页</IHeader>
    </template>
    <view class="login-content whov">
      <view class="login-header flex flex-column items-center">
        <view class="login-logo">
          <image src="/static/images/logo.png" mode="widthFix" class="logo-img"></image>
        </view>
        <view class="login-title">欢迎登录</view>
        <view class="login-subtitle">云仓商户管理系统</view>
      </view>

      <!-- 输入框区域 -->
      <view class="form-area">
        <view class="form-group">
          <uni-easyinput class="input-field" :maxlength="30" v-model="form.phone" placeholder="账号" clearable input-align="center" :border="false" placeholder-style="color:#ccc" />
          <!-- <view class="input-bottom-line"></view> -->
        </view>
        <view class="form-group">
          <uni-easyinput class="input-field" v-model="form.password" type="password" :maxlength="8" placeholder="请输入密码" :clearable="false" input-align="center" :border="false" placeholder-style="color:#ccc" />
          <!-- <view class="input-bottom-line"></view> -->
        </view>
      </view>

      <!-- 操作按钮区域，实现同一行 -->
      <view class="operation-bar">
        <button class="login-btn" v-if="!checkBoxValue.length" @click="() => handleLoginClick()" :disabled="isLoading">
          <template v-if="isLoading">
            <text class="loading-text">登录中...</text>
          </template>
          <template v-else>登录</template>
        </button>

        <button v-if="checkBoxValue.length" class="login-btn" @click="loginFun" :disabled="isLoading">
          <template v-if="isLoading">
            <text class="loading-text">登录中...</text>
          </template>
          <template v-else>登录</template>
        </button>

        <view class="login-btn-cancel" @click="handlerToHome"> 暂不登录 </view>
      </view>

      <view class="user-rule">
        <uni-data-checkbox multiple v-model="checkBoxValue" :localdata="checkboxOptions" shape="circle"> </uni-data-checkbox>
        <text class="text-gray">我已阅读并同意</text>
        <text class="text-blue" @click="handlerToUserProtocol">《商户服务及用户隐私协议》</text>
      </view>

      <!-- 协议确认弹窗 -->
      <uni-popup ref="popupRef" type="dialog">
        <uni-popup-dialog cancelText="拒绝" confirmText="同意" :title="' '" @confirm="handlerConfig" @close="handleLoginClick('close')">
          <view class="text-group">
            <text class="text-gray">使用识遇前，请您阅读并同意以下协议，以便更好地保护您的权益：</text>
            <text class="text-blue" @click="handlerToUserProtocol">《商户服务及用户隐私协议》</text>
          </view>
        </uni-popup-dialog>
      </uni-popup>
    </view>
  </IFexHeaderMain>
</template>

<script setup lang="ts">
  import IFexHeaderMain from '@/components/container/IFexHeaderMain.vue'
  import IHeader from '@/components/container/IHeader.vue'
  import { useNavigatePage } from '@/hooks/navigateTo'
  import useAccountStore from '@/store/account'
  import { ref } from 'vue'
  import useToastMsg from '@/hooks/sysMsg'
  import { getLoginRes, selectUserInfo, userLogin } from '@/api/login'
  import useUserInfoStore from '@/store/userInfo'
  import { getUserDetails, shLogin } from '@/api/zmanager/login'
  const userInfoStore = useUserInfoStore()
  const popupRef = ref()
  const toastMsg = useToastMsg()
  const checkBoxValue = ref<number[]>([1])
  const isLoading = ref(false)
  const navigatePage = useNavigatePage()
  const form = ref({
    phone: '',
    password: '',
  })
  const checkboxOptions = [
    {
      value: 1,
      text: '',
    },
  ]

  const handleLoginClick = (type = 'open') => (type == 'close' ? popupRef.value.close() : popupRef.value.open())
  const getUserInfo = async () => {
    const result: any = await getUserDetails()
    if (result) {
      userInfoStore.setUserInfo(result.data)
      handlerToHome()
    }
  }
  const loginFun = async (e: any) => {
    if (!form.value.phone) {
      toastMsg.showToast('请输入账号')
      return
    }
    if (!form.value.password) {
      toastMsg.showToast('请输入密码')
      return
    }
    if (isLoading.value) return // 防止重复提交
    isLoading.value = true
    try {
      const result = await shLogin(form.value.phone, form.value.password)
      if (result) {
        uni.setStorageSync('shToken', result.data.token)
        uni.setStorageSync('rshToken', result.data.token)
        // getUserInfo()
        handlerToHome()
      }
    } catch (err) {
      isLoading.value = false
    }
     isLoading.value = false
  }

  /**
   * 跳转首页（未登录状态）
   */
  const handlerToHome = () => {
    navigatePage.redirectTo('/pages/zmanager/index/index')
  }

  const handlerToUserProtocol = () => {
    uni.navigateTo({ url: '/pages/zmanager/word/yhxy' })
  }

  const handlerToCommunityNorms = () => {
    uni.navigateTo({ url: '/pages/zmanager/word/ysxy' })
  }

  const handlerConfig = () => {
    checkBoxValue.value = [1]
  }
</script>

<style lang="scss" scoped>
  .login-content {
    background: #fff;
    padding: 0 30rpx;
    box-sizing: border-box;

    // 顶部logo区域
    .login-header {
      padding-top: 80rpx;
      text-align: center;
      .login-logo {
        margin: 0 auto;
        width: 180rpx;
        height: 180rpx;
        border-radius: 50%;
         background: #3b82f6;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 8rpx 16rpx rgba(96, 213, 150, 0.15);

        .logo-img {
          width: 120rpx;
          height: 120rpx;
        }
      }

      .login-title {
        margin-top: 40rpx;
        font-size: 36rpx;
        color: #333;
        font-weight: 600;
        letter-spacing: 2rpx;
      }

      .login-subtitle {
        margin-top: 16rpx;
        font-size: 24rpx;
        color: #999;
        letter-spacing: 1rpx;
      }
    }

    // 表单区域
    .form-area {
      padding-top: 70rpx;

      .form-group {
        position: relative;
        // margin-bottom: 40rpx;

        .input-field {
          font-size: 28rpx;
          color: #333;
          padding: 20rpx 0;
        }

        .input-bottom-line {
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          height: 2rpx;
          background-color: #eee;
        }
      }
    }

    // 操作按钮行
    .operation-bar {
      display: flex;
      margin-top: 20rpx;
      display: flex;
      gap: 16rpx;
      padding-top: 16rpx;

      .login-btn {
        flex: 1;
        line-height: 80rpx;
        background-color: #3b82f6;
        color: white;
        border: none;
        border-radius: 15rpx;
        font-size: 28rpx;
        font-weight: 500;
        transition: all 0.3s;

        .loading-text {
          margin-left: 12rpx;
        }

        &:disabled {
          background-color: #ccc;
          color: #fff;
          opacity: 0.8;
        }
      }

      .login-btn-cancel {
        flex: 1;
        font-size: 26rpx;
        color: #626774;
        line-height: 80rpx;
        text-align: center;
        border-radius: 15rpx;
        transition: all 0.2s;
        border: 1px solid #eee;
        box-sizing: border-box;

        &:active {
          background: #f5f5f5;
        }
      }
    }

    // 协议勾选区域
    .user-rule {
      position: absolute;
      bottom: 120rpx;
      left: 0;
      width: 100%;
      padding: 0 30rpx;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24rpx;
      color: #626774;

      ::v-deep .uni-data-checkbox {
        display: flex;
        align-items: center;

        .uni-checkbox-input {
          width: 28rpx;
          height: 28rpx;
          margin-right: 10rpx;
        }

        .uni-checkbox-text {
          color: #626774;
          line-height: 1.4;
        }
      }
    }
  }

  // 弹窗样式
  .popup-content {
    padding: 40rpx 30rpx;
    text-align: center;

    .popup-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
      margin-bottom: 30rpx;
    }
  }

  .text-group {
    font-size: 26rpx;
    line-height: 1.6;
    text-align: left;
    margin-bottom: 40rpx;

    .text-gray {
      color: #626774;
      display: block;
      margin-bottom: 20rpx;
    }
  }

  .text-blue {
    color: #0a5341;
    text-decoration: underline;
    padding: 5rpx 0;
    cursor: pointer;
  }

  .text-divider {
    color: #999;
  }
  :deep(.checklist-box) {
    margin-right: 10rpx !important;
  }
</style>
